<template>
  <view class="body">
    <view class="head">
      <!-- 1.0 信息 -->
      <view class="info">
        <!-- 头像 -->
        <u-image width="130rpx"
                 height="130rpx"
                 :src="shop.avatar_url"></u-image>
        <!-- 信息 -->
        <view class="item">
          <h3>{{shop.shop_name||'小飞象 · 西餐厅'}}</h3>
          <view class="msg">
            <text>{{shop.delivery_method||'平台配送'}}</text>
            <text>|</text>
            <text>{{shop.shop_floor||'店铺位置'}}</text>
            <text>|</text>
            <text>{{shop.shop_product||'店铺分类'}}</text>
          </view>
        </view>
        <!-- 图标 -->
        <u-icon name="star"
                size='50'></u-icon>
      </view>
      <!-- 2.0 公告 -->
      <view class="notice">公告：欢迎光临本店，很高兴为您服务！</view>
      <!-- 3.0 标签 -->
      <view class="footer">
        <view class="tags">
          <u-tag text="满25减2"
                 type="error"
                 mode='plain'
                 size='mini' />
          <u-tag text="满50减1"
                 type="error"
                 mode='plain'
                 size='mini' />
          <u-tag text="全场9折"
                 type="error"
                 mode='plain'
                 size='mini' />
        </view>
        <u-icon name="arrow-down-fill"
                color='#ccc'
                size='20'></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Head',
  props: {
    shop: Object,
  },
}
</script>

<style lang="scss" scoped>
.body {
  width: 100vw;
  height: 280rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .head {
    box-shadow: 0 10rpx 30rpx rgba(194, 194, 194, 0.5);
    width: 90vw;
    height: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    line-height: 2;
    padding: 20rpx;
    .info {
      flex: 1;
      display: flex;
      align-items: center;
      .item {
        flex: 1;
        margin: 0 20rpx;
        .msg {
          display: flex;
          justify-content: space-between;
          width: 350rpx;
          font-size: 25rpx;
          color: $u-type-info;
        }
      }
    }
    .notice {
      height: 50rpx;
      color: $u-type-info;
      font-size: 25rpx;
      margin: 10rpx 0;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50rpx;
      .tags {
        width: 350rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>